<template>
  <div class="padding-l-20 padding-r-20 padding-t-20 h-100 table-page"
    @click="() => list2.forEach(m => { if(m.id != null && m.id != '') {m.editable = false} })">
    <opt-bar>
      <div slot="left-bar">审核规则</div>
      <div slot="right-bar">
        <a-space>
          <a-button class="nbcs-btn nbcs-btn-default" @click="loadRule" :loading="loading1"> 取消
          </a-button>
          <a-button class="nbcs-btn nbcs-btn-main-bg" v-preventReClick @click="saveRule" :loading="loading2" v-if="permission('sys:checkRule:add') || permission('sys:checkRule:update')"> 保存
          </a-button>
        </a-space>
      </div>
    </opt-bar>
    <a-layout>
      <a-layout-content>
        <check-rule-edit ref="ruleScope" @getList="getList2"></check-rule-edit>
      </a-layout-content>
      <a-layout-sider width="240"
        style="border: 1px solid #f0f0f0; background-color:#ffffff; padding: 0 10px; overflow: auto;">
        <div class="rule-mouse">
          <h3 ref="ruleTitle" class="rule-title">
            <div>
              <span> 规则方案 </span>
            </div>
            <div>
              <a-icon @click.stop="insertRule()" type="plus-circle" v-if="permission('sys:checkRule:add')" />
            </div>
          </h3>
          <a-list :data-source="list2">
            <a-list-item slot="renderItem" slot-scope="item" :class="{ 'rule-at': id == item.id, 'rule-rows': true }"
              @click="editRule(item.id)">
              <div class="item pointer">
                <div>
                  <span class="pref" v-if="id == item.id">●</span>
                  <span class="pref" v-else></span>
                  <template v-if="item.editable">
                    <a-input v-model="item.ruleName" :ref="`rule${item.id}`" @blur="editName(item)" @click.stop=""
                      :maxLength="32" placeholder="请输入规则名称">
                    </a-input>
                  </template>
                  <template v-else><span class="ruleName">{{ item.ruleName }}</span>
                  </template>
                </div>
                <div>
                  <a-space>
                    <a-icon type="form" @click.stop="() => { list2.forEach(m => m.editable = m.id == item.id) }"
                      v-if="permission('sys:checkRule:updateName') && item.ruleName != '默认规则'" />
                    <a-popconfirm title="确定删除该项吗？" @confirm="removeRule(item.id)"
                      v-if="permission('sys:checkRule:delete') && item.ruleName != '默认规则'">
                      <a-icon type="delete" class="pointer" />
                    </a-popconfirm>
                  </a-space>
                </div>
              </div>
            </a-list-item>
          </a-list>
        </div>
      </a-layout-sider>
    </a-layout>
  </div>

</template>

<script>
import { deleted, list as l, add, updateName } from '@/services/checkRule';
import checkRuleEdit from './checkRuleEdit.vue';
import OptBar from '@/layouts/OptBar';
export default {
  name: 'WordList',
  components: { checkRuleEdit, OptBar },
  data() {
    return {
      tableHeight: 0,
      loading1: false,
      loading2: false,
      list2: [],
      id: null,
    };
  },
  computed: {},
  created() {
    this.getList2();
  },
  mounted() {
  },
  methods: {
    permission(name) {
      let permissions = this.$store.getters["account/permissions"];
      return permissions.filter(m => m.id == name || m.operation.indexOf(name) >= 0).length > 0
    },
    getList2(id) {
      l({}).then((res) => {
        const data = res.data;
        if (data.code == 0) {
          data.data.forEach(m => m.editable = false)
          this.list2 = data.data
          let s = false;
          for(let i =0; i< data.data.length; i++) {
            if(data.data[i].id == id) {
              this.editRule(id);
              s = true;
            }
          }
          if (data.data.length >= 1 && !s) {
            let id = data.data[0].id;
            this.editRule(id);
          }
        } else {
          this.$message.error('查询失败')
        }
      })
    },
    editRule(id) {
      this.id = id;
      this.$refs.ruleScope.load(id, null)
    },
    removeRule(id) {
      deleted({ id }).then((res) => {
        const data = res.data;
        if (data.code == 0) {
          this.$message.success('删除成功')
          this.getList2()
        } else {
          this.$message.error(data.message)
        }
      })
    },
    insertRule() {
      let ruleName = "";
      if (this.list2.length == 0) {
        ruleName = "默认规则";
        add({
          ruleName: ruleName,
        }).then((res) => {
          if (res.data.code === 0) {
            this.getList2();
          } else {
            this.$message.error('添加失败')
          }
        });
      } else {
        this.list2.push({
          editable: true,
          ruleName: "",
          id: "",
        })
        this.$nextTick(() => this.$refs['rule'].focus());
      }
    },
    editName(value) {
      if (value.id != null && value.id != '') {
        let { id, ruleName } = value;
        updateName({ id, ruleName }).then((res) => {
          const data = res.data;
          if (data.code == 0) {
            this.$message.success("修改成功")
            this.$nextTick(() => {
              value.editable = false;
              this.$forceUpdate()
            })
          } else {
            this.$message.error(data.message)
          }
        })
      } else {
        if(value.ruleName.trim() == "") {
          this.list2.splice(this.list2.length - 1, 1);
          return;
        }
        add({
          ruleName: value.ruleName,
        }).then((res) => {
          if (res.data.code === 0) {
            this.$message.success("修改成功")
            this.$nextTick(() => {
              value.editable = false;
              this.$forceUpdate()
              this.getList2();
            })
          } else {
            this.$message.error('添加失败')
            this.getList2();
          }
        });
      }
    },
    loadRule() {
      this.loading1 = true;
      this.$refs.ruleScope.load(null, () => this.loading1 = false)
    },
    saveRule() {
      this.loading2 = true;
      this.$refs.ruleScope.ok(() => this.loading2 = false)
    }
  },
};
</script>

<style lang="less" scoped>
.rule-mouse .rule-rows .item {
  margin: 0 4px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.rule-mouse .rule-rows:hover {
  color: #CC1A1A;
}


.rule-mouse .rule-at {
  color: #CC1A1A;
}

.rule-mouse .rule-title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 16px;
  margin-bottom: 16px;
}

.rule-mouse .rule-rows .item input {
  width: 138px;
}

.rule-mouse .pref {
  width: 19px;
  display: inline-block;
}

.pointer {
  cursor: pointer;
}

.ruleName {
  word-break: break-all;
}
</style>
